import { Form } from 'react-router-dom'
import { FC } from 'react'

export const getId = (data: any) => {
  // console.log(data)
  return data
}

export default function Contact() {
  // const data = useLoaderData()
  // console.log(data)
  const contact = {
    first: 'Your',
    last: 'Name',
    avatar: 'http://192.168.100.116:9000/echarts-website/zh/asset/lottie/json/images/img_0.png',
    twitter: 'your_handle',
    notes: 'Some notes',
    favorite: true
  }

  return (
    <div id="contact">
      <div style={{ width: '100px' }}>
        <img
          style={{ width: '100%' }}
          key={contact.avatar}
          src={contact.avatar || undefined}
        />
      </div>

      <div>
        <h1>
          {contact.first || contact.last ? (
            <>
              {contact.first} {contact.last}
            </>
          ) : (
            <i>No Name</i>
          )}{' '}
          <Favorite contact={contact} />
        </h1>

        {contact.twitter && (
          <p>
            <a
              target="_blank"
              href={`https://twitter.com/${contact.twitter}`}
            >
              {contact.twitter}
            </a>
          </p>
        )}

        {contact.notes && <p>{contact.notes}</p>}

        <div>
          <Form action="edit">
            <button type="submit">Edit</button>
          </Form>
          <Form
            method="post"
            action="destroy"
            onSubmit={(event) => {
              if (
                !confirm(
                  'Please confirm you want to delete this record.'
                )
              ) {
                event.preventDefault()
              }
            }}
          >
            <button type="submit">Delete</button>
          </Form>
        </div>
      </div>
    </div>
  )
}

interface Favorite {
  contact: {
    favorite: boolean;
  }
}

const Favorite: FC<Favorite> = ({ contact }) => {
  // yes, this is a `let` for later
  const favorite = contact.favorite
  return (
    <Form method="post">
      <button
        name="favorite"
        value={favorite ? 'false' : 'true'}
        aria-label={
          favorite
            ? 'Remove from favorites'
            : 'Add to favorites'
        }
      >
        {favorite ? '★' : '☆'}
      </button>
    </Form>
  )
}
